<template>
	<view class="system">
		<template v-if="listStatus === 'success'">
			<view
				 v-for="(item,index) in list"
				class="for"
				@click="clickButton(item.nmid,item.actionInfo.pid?item.actionInfo.pid:item.actionInfo.cid,item.actionInfo.pid?'pid':'cid')">
				<view class="for-type">
					<view class="for-type-info">
						<text style="padding-right: 5rpx;">{{item.timeAgo}}</text>
						<text>{{item.actionUser.nickname}}{{$t('notificationMentioned')}}</text>
						
					</view>
					<view class="for-type-is" v-if="!item.readStatus"></view>
				</view>
				<view class="for-post">
					<text class="digit">{{index+1}}.</text>
					<view class="title" v-if="item.actionInfo">
						{{$_filterHtml(item.actionInfo.content)}}
					</view>
					<view class="title" v-else style="color: #C0C4CC;">
						{{$t('listWithoutPage')}}
					</view>
				</view>
			</view>
			<view
				@click="clickMoreButton"
				class="more-content">
				{{listPageText}}
			</view>
		</template>
		<template v-if="listStatus === 'loading'">
			<global-loading></global-loading>
		</template>
		<template v-if="listStatus === 'empty'">
			<global-empty></global-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				listPageText:this.$t('clickToLoadMore'),
				listPage:2,
				listStatus:"loading"
			}
		},
		onShow() {
			setTimeout(()=>{
				this.getNotification();
			},200);
		},
		methods: {
			getNotification(){
				this.$_request(
					"GET","/api/fresns/v1/notification/list",
					{
						"status":"",
						"types":7,
						"filterUserType":"whitelist",
						"filterUserKeys":"nickname",
						"filterInfoType":"whitelist",
						"filterInfoKeys":"pid,cid,content",
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list;
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			clickButton(nmid,id,type){
				if(!id){ return; }
				uni.showLoading();
				this.$_request(
					"PATCH","/api/fresns/v1/notification/read-status",
					{
						"type":"choose",
						"notificationIds":nmid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							if(type === 'pid'){
								this.$_to('post/detail?pid=' + id)
							}
							if(type === 'cid'){
								this.$_to('comment/detail?cid=' + id)
							}
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1500
							});
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET","/api/fresns/v1/notification/list",
					{
						"status":"",
						"types":7,
						"filterUserType":"whitelist",
						"filterUserKeys":"nickname",
						"filterInfoType":"whitelist",
						"filterInfoKeys":"pid,cid,content",
						"page":this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listWithoutPage')
						}
					}
				)
			}
		}
	}
</script>

<style lang="scss">
.system{
	padding: 0 25rpx;
	background: #FFF;
	.for{
		border-bottom: 1px solid $border;
		padding: 25rpx 0;
		.for-type{
			display: flex;
			align-items: center;
			.for-type-info{
				display: inline-flex;
				align-items: center;
				background: $theme;
				font-size: 18rpx;
				line-height: 18rpx;
				color: #FFF;
				height: 30rpx;
				padding: 0 10rpx;
				border-radius: 100rpx;
			}
			.for-type-is{
				width: 20rpx;
				height: 20rpx;
				background: $red;
				margin-left: 15rpx;
				border-radius: 100rpx;
			}
		}
		.for-post{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			.digit{
				color: $placeholder;
				padding-right: 5rpx;
				flex-shrink: 0;
			}
			.title{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
	}
	.more-content{
		padding: 25rpx 0;
		font-size: 22rpx;
		line-height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $placeholder;
	}
}
</style>
